<template>
	<div :class="orderList.length > 0 ? '' : 'full-height'">
		<van-nav-bar title="订单中心" left-arrow @click-left="$utils.back($route.path)" />
		<!-- 搜索栏 -->
		<div class="order_search pd-24 bg-white">
			<div class="bg-white flex-v-c pos-r">
				<van-field v-model="searchKey" class="flex-1" clearable placeholder="请输入房间号/姓名/手机号" left-icon="search"
					@click-left-icon="search" @keyup.enter="search" />
				<div class="pos-a right-20 fs-26" @click="search">搜索</div>
			</div>
			<!--<div class="sift" @click="openPop">
				<span>筛选</span>
				<img src="@/assets/images/physio/sift.png" />
			</div>        -->
		</div>
		<van-tabs v-model:active="active" @change="tabChange">
			<van-tab :title="item.title" v-for="(item, index) in tabs" :key="index">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
					<div class="pb-50">
						<div v-for="(items, index) in orderList" :key="index" class="mt-24 mlr-24">
							<div v-if="items.State === 1" class="arrive">预计到达时间<span>{{ items.BookStartTime }}</span></div>
							<div class="fs-24 bg-white br-16 van-clearfix pd-24">
								<div class="flex flex-s-c pt-26" @click="goDetail(items.OrderId)">
									<div class="flex flex-v-c">
										<span class="fs-34 color-dark ml-8 lh-48">{{ items.RoomName }} {{ items.RoomNo }}</span>
									</div>
									<span class="css-mdtxt" :class="'State' + items.State">{{ items.StateName }}</span>
								</div>
								<div class="mtb-24 pd-24 bg-selfgray flex flex-s-c" @click="goDetail(items.OrderId)">
									<div class="fs-26 color-dark lh-36">
										<p class="mb-16">预定{{ requestData.saleType === '0' ? '入住' : '开始' }}时间：{{ items.BookStartTime }}</p>
										<p>预定{{ requestData.saleType === '0' ? '离店' : '结束' }}时间：{{ items.BookEndTime }}</p>
									</div>
									<div class="fs-26 color-dark" v-if="requestData.saleType === '0'">共{{ items.Amount }}晚</div>
									<div class="fs-26 color-dark" v-if="requestData.saleType === '1'">共{{ items.Amount / 2 }}小时</div>
								</div>
								<div class="flex flex-s-fe fs-24 color-gray lh-40 pb-24">
									<p>{{ items.OrderAddTime }}</p>
									<p>订单金额:<span :class="items.CouponMoney === 0 ? 'ml-16 fs-36 fw-b color-dark' : ''">{{ items.PriceSum
									}}</span></p>
									<p v-if="items.CouponMoney !== 0">实付:<span
											class="ml-16 fs-36 fw-b color-dark">{{ items.ReceiptMoney }}</span></p>
								</div>
								<div v-if="items.State == 1 || items.State == 2" class="flex flex-fe-c pb-24">
									<button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
										v-if="items.State == 1" @click="CancleOrder(items)">取消订单</button>
									<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
										v-if="items.State == 1 && requestData.saleType === '0'" @click="OrderBookIn(items)">办理入住</button>
									<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
										v-if="items.State == 1 && requestData.saleType === '1'" @click="teaOrderBookIn(items)">立即使用</button>
									<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
										v-if="items.State == 2 && requestData.saleType === '0'" @click="OrderBookOut(items)">办理退房</button>
									<button class="ml-8 br-32 color-white fs-24 plr-38 other-btn" native-type="submit"
										v-if="items.State == 2" @click="GetRoomQrCode(items)">开门码</button>
								</div>
							</div>
						</div>
					</div>
					<div class="no-data pb-0" v-if="blank">
						<svg-icon icon-class="no-data" />
					</div>
				</van-list>
			</van-tab>
		</van-tabs>

		<!-- 开门码弹窗 -->
		<van-dialog v-model="posterShow" class="posterDiv" :showConfirmButton="false" width="80%">
			<div class="poster_main  bg-white bblr-32 bbrr-32 mb-70">
				<SvgIcon icon-class="close" class="fs-60  closecss z-out color-dark" @goPage="closeQrcode" />
				<div class="qrcode" id="qrcode" ref="qrcode"><img class="is-200" :src="qrcode" /></div>
				<div class="mt-40">将此二维码对准设备，即可开门</div>
			</div>
			<div class="flex flex-sa-c">
				<div class="flex flex-d-c flex-center flex-1">
					<div class="flex flex-center down br-54">
						<svg-icon icon-class="down" class="fs-40 color-white" />
					</div>
					<span class="fs-36 lh-40 mt-16 color-white">长按二维码保存图片</span>
				</div>
			</div>
		</van-dialog>

	</div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import jrQrcode from "jr-qrcode";
import SvgIcon from 'components/SvgIcon'
import {
	GetOrderBookPageByStore,
	OrderBookInByStore,
	OrderBookOutByStore,
	GetRoomQrCode,
	ConfirmOrderRefundByStore
} from 'api/teaHouse'
import { SSL_OP_NO_TLSv1_1 } from 'constants';
export default {
	components: {
		TopSearch, noData, SvgIcon
	},
	props: {
	},
	data() {
		return {
			tabs: [
				{
					title: '全部',
					status: -1,
				},
				{
					title: '已预定',
					status: 1,
				},
				{
					title: '入住中',
					status: 2,
				},
				{
					title: '已退房',
					status: 5,
				},
				{
					title: '已取消',
					status: 7,
				},
			],
			oldRequestData: {},
			// 请求参数
			requestData: {
				PageIndex: 1,
				PageSize: 10,
				states: -1,
				saleType: 0,
			},
			active: 0,
			states: 1, // 0 全部
			loading: false, // 加载load
			finished: false, // 无更多数据
			blank: false, // 是否为空数据
			searchKey: '',
			orderList: [],
			posterShow: false, // 二维码弹窗显示
			qrcode: '', // 二维码图片地址
			ewm: '', // 点击开门码时存储所带数据生成二维码内容
		}
	},
	computed: {

	},
	watch: {

	},
	created() {
		if (this.$route.query.saleType !== undefined) {
			this.requestData.saleType = this.$route.query.saleType
		}
	},
	mounted() {
	},
	activated() {
		this.reset()
	},
	methods: {
		// 获取列表
		GetOrderBookPage() {
			const _this = this
			_this.loading = true
			GetOrderBookPageByStore(_this.requestData).then(res => {
				if (res.State == 0) {
					_this.finished = true
					_this.loading = false
					return
				}
				if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
					_this.finished = true
				} else {
					_this.finished = false
				}
				_this.blank = false
				_this.loading = false
				_this.orderList = _this.orderList.concat(res.Data.Data)
				if (_this.orderList.length == 0) {
					_this.blank = true
				}
				_this.orderList.map(function (item, index) {
					if (new Date(item.BookEndTime.split(' ')[0]).getTime() < new Date(_this.$utils.dateFomat('yyyy-mm-dd HH:MM:SS', new Date()).split(' ')[0]).getTime() && item.State == 2) {
						item.noOver = true
					}
				})
			})
		},
		// 上拉加载更多
		moreData() {
			this.requestData.PageIndex = this.requestData.PageIndex + 1
			this.GetOrderBookPage()
		},
		// 重新请求
		reset() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			if (this.requestData.saleType === '1') {
				this.tabs = [
					{
						title: '全部',
						status: -1,
					},
					{
						title: '已预定',
						status: 1,
					},
					{
						title: '已使用',
						status: 2,
					},
					{
						title: '已完成',
						status: 5,
					},
					{
						title: '已取消',
						status: 7,
					},
				]
			}
			this.orderList = []
			// 获取列表
			this.GetOrderBookPage()
		},
		// tab置顶
		scroll(data) {
			if (data.isFixed) {
				this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
			} else {
				this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
			}
		},
		// tab切换
		tabChange(e) {

			this.orderList = []
			// 状态id
			this.requestData.states = e
			if (e === 0) {
				this.requestData.states = -1
			}
			if (e === 3) {
				this.requestData.states = 5
			}
			if (e === 4) {
				this.requestData.states = '3,6'
			}
			// 获取列表
			this.GetOrderBookPage()
		},

		// 入住
		OrderBookIn(item) {
			this.$router.push('roomManageCheckIn/' + item.OrderId)
		},
		teaOrderBookIn(item) {
			OrderBookInByStore({ orderId: item.OrderId, isOrderBookIn: 1, }).then(res => {
				if (res.Data) {
					this.reset()
				}
			})
		},
		// 退房
		OrderBookOut(item) {
			OrderBookOutByStore(item.OrderId).then(res => {
				if (res.Data) {
					// 获取列表
					this.reset()
				}
			})
		},

		// 取消订单
		CancleOrder(item) {
			ConfirmOrderRefundByStore(item.OrderId).then(res => {
				if (res.Data) {
					// 获取列表
					this.reset()
				}
			})
		},

		// 开门码
		GetRoomQrCode(item) {
			this.infos = item
			GetRoomQrCode(item.OrderId).then(res => {
				if (res.State == 0) {
					return
				}
				this.ewm = res.Data
				this.$nextTick(() => {
					let imgBase64 = jrQrcode.getQrBase64(this.ewm, {//生成二维码
						padding: 10,   // 二维码四边空白（默认为10px）
						width: 200,  // 二维码图片宽度（默认为256px）
						height: 200,  // 二维码图片高度（默认为256px）
						correctLevel: QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
						reverse: false,        // 反色二维码，二维码颜色为上层容器的背景颜色
						background: "#ffffff",    // 二维码背景颜色（默认白色）
						foreground: "#000000"     // 二维码颜色（默认黑色）
					});  //options为配置对象，支持以下配置参数：
					this.qrcode = imgBase64
				})
				this.posterShow = true
			})
		},
		// 为了防止重复生成二维码，使用置空
		closeQrcode() {
			this.posterShow = false
			setTimeout(function () {
				this.qrcode = ''
			}, 150)
		},
		goDetail(id) {
			this.$router.push('roomManageOrderDetail/' + id)
		},
		goPay() {

		},
		goCheckIn() {
			this.$router.push(`roomManageCheckIn`)
		},

		search() {
			this.resetParams()
			this.requestData.searchKey = this.searchKey
			this.GetOrderBookPage()
		},
		openPop() {
			this.rightPopupShow = true
		},
		openStartDateSelect() {
			if (this.requestData.startTime) {
				this.startCurrentDate = new Date(this.requestData.startTime)
			} else {
				this.startCurrentDate = new Date()
			}
			this.startDateSelect = true
		},
		openEndDateSelect() {
			if (this.requestData.endTime) {
				this.endCurrentDate = new Date(this.requestData.endTime)
			} else {
				this.endCurrentDate = new Date()
			}
			this.endDateSelect = true
		},
		openOrderStartDateSelect() {
			this.timeField = 0
			if (this.requestData.orderStartTime) {
				this.orderStartCurrentDate = new Date(this.requestData.orderStartTime)
			} else {
				this.orderStartCurrentDate = new Date()
			}
			this.startDateSelect = true
		},
		openOrderEndDateSelect() {
			this.timeField = 0
			if (this.requestData.endTime) {
				this.orderEndCurrentDate = new Date(this.requestData.orderEndTime)
			} else {
				this.orderEndCurrentDate = new Date()
			}
			this.endDateSelect = true
		},
		openServiceStartDateSelect() {
			this.timeField = 1
			if (this.requestData.serviceStartTime) {
				this.serviceStartCurrentDate = new Date(this.requestData.serviceStartTime)
			} else {
				this.serviceStartCurrentDate = new Date()
			}
			this.startDateSelect = true
		},
		openServiceEndDateSelect() {
			this.timeField = 1
			if (this.requestData.serviceEndTime) {
				this.serviceEndCurrentDate = new Date(this.requestData.serviceEndTime)
			} else {
				this.serviceEndCurrentDate = new Date()
			}
			this.endDateSelect = true
		},
		onStartConfirm(val) {
			if (this.timeField == 0) {
				this.requestData.serviceStartTime = ''
				this.requestData.serviceEndTime = ''
				if (this.requestData.orderEndTime && this.endCurrentDate < val) {
					this.$toast('开始时间不能晚于结束时间')
					return false
				}
				this.requestData.orderStartTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			} else {
				this.requestData.orderStartTime = ''
				this.requestData.orderEndTime = ''
				if (this.requestData.serviceEndTime && this.endCurrentDate < val) {
					this.$toast('开始时间不能晚于结束时间')
					return false
				}
				this.requestData.serviceStartTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			}
			this.requestData.startTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			this.startDateSelect = false
			this.$forceUpdate()
		},
		onEndConfirm(val) {
			if (this.timeField == 0) {
				this.requestData.serviceStartTime = ''
				this.requestData.serviceEndTime = ''
				if (this.requestData.orderStartTime && this.startCurrentDate > val) {
					this.$toast('结束时间不能早于开始时间')
					return false
				}
				this.requestData.orderEndTime = this.$utils.dateFomat('yyyy-mm-dd', val)

			} else {
				this.requestData.orderStartTime = ''
				this.requestData.orderEndTime = ''
				if (this.requestData.serviceStartTime && this.startCurrentDate > val) {
					this.$toast('结束时间不能早于开始时间')
					return false
				}
				this.requestData.serviceEndTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			}
			this.requestData.endTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			console.log(this.requestData.endTime)
			this.endDateSelect = false
			this.$forceUpdate()
		},

		confirm() {
			if (new Date(this.requestData.endTime) < new Date(this.requestData.startTime)) {
				this.$toast('结束时间不能早于开始时间')
				return false
			}
			this.rightPopupShow = false
			this.oldRequestData = JSON.parse(JSON.stringify(this.requestData))
			this.oldRequestData.userName = this.val
			this.freshData++
			this.requestData.timeField = this.timeField
			this.requestData.isAddedOrder = this.radio
			if (this.timeField === 1) {
				this.requestData.startTime = this.requestData.serviceStartTime
				this.requestData.endTime = this.requestData.serviceEndTime
			} else {
				this.requestData.startTime = this.requestData.orderStartTime
				this.requestData.endTime = this.requestData.orderEndTime
			}
			this.GetOrderBookPage()
		},
		change(e) {
			this.radio = e
		},
		resetParams() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 4
			this.orderList = []
			this.totalAmout = 0
			this.scollRequest = true
			this.scollTop = 0
			this.end = false
		},
	}
}
</script>

<style lang="scss" scoped>
.noorder {
	margin: 118px 136px 0 134px;
	position: relative;

	span {
		position: absolute;
		top: 252px;
		left: 168px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
}

.order_search {
	display: flex;
	align-items: center;
}

.sift {
	width: 136px;
	height: 64px;
	background: #F2F3FC;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sift img {
	width: 32px;
	height: 32px;
	margin-left: 10px;
}

.pos-r {
	height: 64px;
	background: #FFFFFF;
	border-radius: 41px;
	border: 1px solid $primary15;
	margin-right: 24px;
	padding: 0 10px;
	width: 100%;
}

.pos-a {
	background: $primary15;
	color: #fff;
	padding: 3px 20px;
	border-radius: 20px;
}

.van-cell {
	padding: 0 12px;
}

.van-cell::after {
	border-bottom: none
}

.time_frame {
	display: flex;
	flex-wrap: wrap;
	font-size: 28px;

	p {
		width: 182px;
		height: 64px;
		line-height: 64px;
		background: #F2F3FC;
		border-radius: 40px;
		text-align: center;
		margin-bottom: 24px;
	}

	p:nth-child(3n+2) {
		margin: 0 24px;
	}
}

.ht:before,
.hb:before {
	border-top: none;
}

.full-height {
	height: 100vh;
	background: #fff;
}

.activeDate {
	background: rgba(116, 89, 255, 0.1);
	border-radius: 40px;
	border: 1px solid $primary15 ;
}

.activeDates {
	background: rgba(116, 89, 255, 0.1);
	border-radius: 40px;
	border: 1px solid $primary15 ;
}

/deep/.van-tab--active {
	color: $primary15 ;
}

/deep/.van-tabs__line {
	background: $primary15 ;
}

/deep/ .van-dialog__confirm {
	color: $primary15 ;
}

/deep/.van-field__body {
	width: 85%;
}

.State0 {
	background: #F2F3FC;
	color: #7459FF;
}

.State1 {
	background: rgba(250, 173, 20, 0.1);
	color: #FAAD14;
}

.State2 {
	background: rgba(0, 193, 19, 0.1);
	color: #00C113;
}

.State5 {
	background: #F2F3FC;
	color: #333;
}

.State7 {
	background: rgba(255, 107, 0, 0.1);
	color: #FF6B00;
}

.css-mdtxt {
	width: 104px;
	height: 40px;
	line-height: 40px;
	border-radius: 8px;
	text-align: center;
}

.sef-btn {
	background: #FFFFFF;
	height: 64px;
	line-height: 64px;
	border: 1px solid #666666;
}

.other-btn {
	@include bg-primary;
	height: 64px;
	line-height: 64px;
	border: 1px solid transparent !important;
}

.van-cell::after {
	border-bottom: none
}

.arrive {
	height: 72px;
	line-height: 72px;
	background: #FFF3DB;
	border-radius: 16px 16px 0px 0px;
	font-size: 28px;
	text-align: center;

	span {
		color: $primary15;
		margin-left: 20px;
	}
}

.closecss {
	top: 20px;
	right: 16px;
	width: 50px;
	height: 50px;
	position: absolute;
}

.poster_main {
	text-align: center;
	padding: 62px 60px 62px;

	img {
		width: 450px;
		height: 450px;
	}

	p {
		font-size: 28px;
		color: #F54F1B;
		padding: 30px 0;
		font-weight: 500;
	}

	div {
		font-size: 28px;
		color: #333;
		font-weight: 400;
	}
}

/deep/.posterDiv {
	background-color: transparent;
}

.down {
	width: 96px;
	// height: 96px;
	// background: #8AC24C;
}
</style>
